import { Component } from 'react';
import { View, Image } from '@tarojs/components';
import dayjs from 'dayjs';
import Taro from '@tarojs/taro';
import NavBar from '@/components/NavBar/index';
import titleIcon from '@/assets/images/miaosha/title.png';
// import CartBtn from '@/components/CartBtn';
import { AtDivider } from 'taro-ui';
import EmptyContent from '@/components/EmptyContent';
import { getMidaoshaDates } from '@/service/apis/home/index';
import WechatShare from '@/components/WechatShare';
import CountDown from './components/CountDown';
import Header from './components/Header/index';
import ProductItem from './components/ProductItem';
import './index.scss';

export default class Index extends Component {
  state = {
    active: 0,
    currentDay: dayjs().format('YYYY-MM-DD'),
    nextDay: dayjs().add(1, 'date').format('YYYY-MM-DD'),
    currentDateList: [],
    nextDateList: [],
    remainTime: 0,
  };
  componentDidMount = async () => {
    this.getMiaoshaList(1);
    this.getEndTime();
  };

  getMiaoshaList = async (type: number) => {
    try {
      const { data } = await getMidaoshaDates({
        new_data: type === 1 ? this.state.currentDay : this.state.nextDay,
      });
      if (type === 1) {
        this.setState({
          currentDateList: data.kill_list,
        });
      } else {
        this.setState({
          nextDateList: data.kill_list,
        });
      }
    } catch (err) {
      Taro.showToast({
        title: err.message,
        icon: 'none',
      });
    }
  };

  renderTitle = () => {
    return <Image className="title-icon" src={titleIcon} />;
  };

  onTabChange = (value: number) => {
    this.setState({ active: value });
  };

  getEndTime = () => {
    const endTime = dayjs(dayjs().format('YYYY-MM-DD')).add(1, 'day').valueOf();
    const remainTime = ((endTime - dayjs().valueOf()) / 1000).toFixed(0);
    this.setState({
      remainTime: remainTime,
    });
  };

  render() {
    const { currentDateList, nextDateList, active, remainTime } = this.state;
    const list = active === 0 ? currentDateList : nextDateList;
    return (
      <View className="miaosha-wrap">
        <NavBar showBackBtn title={this.renderTitle} style={{ color: '#fff' }} />
        <Header onChange={this.onTabChange} current={active} />
        <View className="product-content">
          <View className="top-time">
            <View className="time-container">
              剩余时间
              <CountDown seconds={remainTime} />
            </View>
            <View className="right-desc">抢完恢复原价！</View>
          </View>
          <View className="product-list">
            {list.map((item) => {
              return <ProductItem key={item.id} product={item} />;
            })}
            {list.length === 0 ? (
              <EmptyContent title="当前没有秒杀活动" />
            ) : (
              <AtDivider content="~没有更多了~" fontColor="#aaa" fontSize="14" lineColor="transparent" />
            )}
          </View>
        </View>
        <WechatShare />
        {/* <CartBtn /> */}
      </View>
    );
  }
}
